/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent } from "vue";
/* scss */
import "@src/modules/setting/gpt/components/checkbox.scss";
/* util */
import { isFalsy } from "@src/util/type";
import { findComponentUpward } from "@src/util/assist";

enum SettingGPTViewCheckboxEventEnum {
  Change = 'change',
  Click = 'click'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTViewCheckbox,
  emits: [
    SettingGPTViewCheckboxEventEnum.Change,
    SettingGPTViewCheckboxEventEnum.Click
  ],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    onChange: {
      type: Function
    },
    onClick: {
      type: Function
    }
  },
  data() {
    return {
      checked: false
    }
  },
  computed: {
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.SettingGPTViewCheckbox]: true,
        [`${ComponentNameEnum.SettingGPTViewCheckbox}-checked`]: this.checked,
        [`${ComponentNameEnum.SettingGPTViewCheckbox}-disabled`]: this.disabled
      }
    }
  },
  methods: {
    onChangeHandler() {
      
      this.$emit(SettingGPTViewCheckboxEventEnum.Click)
      
      if (isFalsy(this.label)) {
        return
      }
      
      if (this.disabled) {
        return
      }
      
      let groupComponent = this.$parent as Record<string, any>
      const groupComponentIsCheckboxGroup = groupComponent?.name == ComponentNameEnum.SettingGPTViewCheckboxGroup
      
      if (isFalsy(groupComponent) || isFalsy(groupComponentIsCheckboxGroup)) {
        groupComponent = findComponentUpward(this, ComponentNameEnum.SettingGPTViewCheckboxGroup)
      }
      
      groupComponent.onItemChangeHandler(!this.checked, this.label)
      
    }
  },
  render() {
    return (
      <div 
        class={this.classNames}
        onClick={this.onChangeHandler}
      >
        
        { this.$slots.default }
        
        <div class="setting-gpt-view-checkbox-sub">
          <i class="iconfont icon-check"></i>
        </div>
        
      </div>
    )
  }
});